<template>
  <div id="goods05">
    <!-- 5.历史匹配记录 -->
    <div class="showDiv05">
      <div class="topBox">
        <div>
          <div data-v-378b4e67 class="notice-box"></div>
          历史匹配记录
        </div>
        <span class="back" @click="back"
          >重新匹配<img src="@/assets/li/more.png"
        /></span>
      </div>
      <section style="min-height: 820px">
        <table class="table">
          <thead>
            <tr>
              <th>查询日期</th>
              <th>达人</th>
              <th>推荐商品</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody v-if="goodsList.length != 0 && !loadingH">
            <tr v-for="(item, index) in goodsList" :key="index">
              <td>{{ item.createTime.substring(0, 10) }}</td>
              <td>
                <div class="goodsBox">
                  <img
                    :src="item.authorLogo"
                    alt
                    class="avator"
                    v-errorImg:talent
                    @click="expert(item.authorId)"
                  />
                  <p @click="expert(item.authorId)">{{ item.authorName }}</p>
                </div>
              </td>
              <td>
                <div class="talentBox" v-if="item.recommendProduct.length != 0">
                  <img
                    v-for="(item01, index01) in item.recommendProduct.slice(
                      0,
                      5
                    )"
                    :key="index01"
                    :src="item01.proLogo"
                    v-errorImg:shop
                    @click="result(item01.proId)"
                  />
                </div>
                <div
                  class="talentBox_text"
                  v-if="item.recommendProduct.length == 0 && item.status == 1"
                >
                  暂未匹配到任何商品
                </div>
              </td>
              <td>
                <button class="detailsBtn02" v-if="item.status != 1">
                  正在匹配
                </button>
                <button
                  class="detailsBtn"
                  @click="to(item)"
                  v-if="item.status == 1"
                >
                  查看详情
                </button>
              </td>
            </tr>
          </tbody>
        </table>
        <div
          v-loading="loadingH"
          v-if="loadingH"
          class="loading"
          element-loading-text="拼命加载中..."
          element-loading-spinner="el-icon-loading"
        ></div>
        <div class="empty" v-show="!loadingH && goodsList.length == 0">
          <img src="@/assets/liu/zw.png" />
          <p>目前没有可以查看的数据哟~</p>
        </div>
      </section>
      <div class="pageBox">
        <el-pagination
          background
          layout="prev, pager, next, jumper"
          :total="count"
          :page-size="10"
          :current-page="goodsPage"
          @current-change="getData"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
      goodsPage: 1,
      goodsList: [],

      needBuy: false,
      goodid: "",
      loadingH: true,
      time: "",
      timename: "",
    };
  },
  created() {
    this.getData();
    this.timename = setInterval(() => {
      this.getData();
    }, 30000);
    document.title = "智能找商品&智能分析服务平台-掌上精选";
  },

  methods: {
    getData(cpage) {
      let that = this;
      that.loadingH = true;
      if (cpage) {
        that.goodsPage = cpage;
        that.backTop();
      }
      that.$axios
        .post(
          "/api/product/SearchProductHistory",
          {
            PageIndex: that.goodsPage,
            PageSize: "10",
            SortOrder: "desc",
            SortValue: "CreateTime",
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel != null) {
                that.cancel();
              }
              that.cancel = c;
            }),
          }
        )
        .then((res) => {
          if (res.data.code == 0) {
            this.count = res.data.data.pageInfo.totalCount;
            this.goodsList = res.data.data.data;
            this.goodid = res.data.data.data.authorId;
            let a = this.goodsList.every((item) => {
              return item.status == 1;
            });
            if (a) {
              clearTimeout(this.timename);
            }

            that.loadingH = false;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    back() {
      this.$router.push("/inAnalysis/SearchGoods");
    },
    expert(id) {
      let router = this.$router.resolve({
        path: `/talent_main/tdetails/${id}/0`,
      });
      window.open(router.href, "_blank");
    },
    result(id) {
      let router = this.$router.resolve({
        path: `/talent_main/shop_main/${id}/0`,
      });
      window.open(router.href, "_blank");
    },

    to(item) {
      localStorage.setItem(
        "productList",
        JSON.stringify(item.recommendProduct.slice(0, 5))
      );
      localStorage.setItem("Uptime", JSON.stringify(item.createTime));
      this.$router.push("/inAnalysis/resultList");
    },
    backTop() {
      document.body.scrollTop = document.documentElement.scrollTop = 0;
    },
  },
};
</script>
<style lang="less" scoped>
#goods05 {
  background-color: #f5f5f5;
  padding-top: 14px;
  .showDiv05 {
    width: 1200px;
    margin: 0 auto;
    overflow: auto;
    box-sizing: border-box;
    padding: 20px;
    padding-top: 30px;
    background-color: #ffffff;
    border-radius: 4px;
    margin-top: 14px;
    min-height: 100vh;
    height: fit-content;
    .topBox {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .notice-box {
        display: inline-block;
        width: 4px;
        height: 16px;
        border-radius: 100px;
        margin-right: 10px;
        background-color: #fd7f2c;
        margin-top: 1px;
      }
      > div {
        font-size: 16px;
        color: #222;
        font-weight: 600;

        display: flex;
        align-items: center;
      }
      span {
        font-size: 14px;
        color: #fd7f2c;
        cursor: pointer;
      }
    }
    table {
      margin-top: 20px;

      thead {
        tr {
          th:nth-child(1) {
            width: 15%;
          }
          th:nth-child(3) {
            width: 23%;
          }
          th:nth-child(2) {
            width: 160px;
            text-align: left;
            padding-left: 60px;
          }
        }
      }
      tbody {
        tr {
          height: 78px;
          text-align: center;
          td:nth-child(2) {
            text-align: left;
            .goodsBox {
              cursor: pointer;
              display: flex;
              justify-content: start;
              align-items: center;
              padding-left: 60px;
              .avator {
                width: 50px;
                height: 50px;
                border-radius: 50%;
                border: 1px solid #e5e5e5;
                margin-right: 9px;
              }

              p {
                width: 216px;
                font-size: 14px;
                color: #222;
                font-weight: 600;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
              p:hover {
                color: #fd7f2c;
              }
            }
          }
          td:nth-child(1) {
            font-weight: 600;
            font-size: 15px;
            color: "#222222";
          }
          td:nth-child(3) {
            font-size: 15px;
            letter-spacing: 0px;
          }
          td:nth-child(4) {
            width: 230px;
          }
        }
      }
    }

    .detailsBtn {
      width: 88px;
      height: 32px;
      border-radius: 4px;
      border: solid 1px #fd7f2c;
      font-size: 14px;
      line-height: 30px;
      color: #fd7f2c;
    }
    .detailsBtn:hover {
      border: 1px solid #ff924b;
      color: #ff924b;
    }
    .detailsBtn02 {
      width: 88px;
      height: 32px;
      border-radius: 4px;
      border: solid 1px #e5e5e5;
      font-size: 14px;
      color: #555;
    }
    .talentBox {
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      flex-wrap: wrap;

      img {
        border-radius: 6px;
        width: 50px;
        height: 50px;
        margin-left: -12px;
      }
    }
    .talentBox_text {
      font-size: 15px;
      color: #888;
    }
  }
  .back {
    > img {
      width: 7px;
      height: 11px;
      margin-left: 5px;
      margin-top: -3px;
    }
  }
}
</style>
